<template>
    <div>
        <slot
                name="header"
                :select="select"
        />
        <el-table
                id="table"
                :data="data"
                :span-method="objectSpanMethod"
                tooltip-effect="light"
                v-bind="$attrs"
                :header-cell-style="{color:'#333',fontSize:'14px',fontWeight:600,background:'#F2F7FF',textAlign: 'center'}"
                :cell-style="{color:'#666666',textAlign: 'center'}"
                v-on="$listeners"
                @selection-change="handleSelectionChange"
        >
            <div
                    v-if="this.$slots.empty"
                    slot="empty"
                    class="no-data"
            >
                <slot name="empty" />
            </div>
            <slot />
        </el-table>
        <div
                class="flex-h right "
                style="padding: 23px 0"
        >
            <el-pagination
                    background
                    :current-page.sync="page.pageNum"
                    :page-size.sync="page.pageSize"
                    :page-sizes="[10, 20, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="request"
                    @current-change="request"
            />
            <div>
                <el-button size="mini">
                    跳转
                </el-button>
            </div>
        </div>
        <slot
                name="footer"
                :select="select"
        />
    </div>
</template>

<script>

    /*
    <el-button type="primary" :disabled=""></el-button>
    <el-input v-model="" placeholder="" clearable @keyup.enter.native="$event.target.blur" @change="" suffix-icon="el-icon-" />
    <SelectInput :option="" placeholder="" />
    <el-table-column label="" prop="" align="" />
     */
    const INIT_PAGE_NUM = 1

    export default {
        name: 'TablePublicComponent',
        props: {
            total: {
                type: Number,
                default: 0
            },
            data: {
                default: () => ([]),
                type: Array
            },
            /**
             * 获取数据的方法
             */
            request: {
                required: true,
                type: Function
            },
            watch: {
                type: [String, Number],
                default: undefined
            },
            /**
             *  合并单元格方法
             */
            // eslint-disable-next-line vue/require-default-prop
            objectSpanMethod: {
                type: Function
            }
        },
        data() {
            return {
                page: {
                    pageNum: INIT_PAGE_NUM,
                    pageSize: 10
                },
                select: []
            }
        },
        watch: {
            watch() {
                this.refresh()
            }
        },
        mounted() {
            this.$attrs.banInit || setTimeout(() => this.request(), 0)
        },
        methods: {
            refresh() {
                this.page.pageNum = INIT_PAGE_NUM
                this.request()
            },
            handleSelectionChange(val) {
                this.select = val
            }
        }
    }
</script>
<style scoped>
    .el-table{
        border: 1px solid #ebeef5;
        border-bottom: none;
    }
    .no-data{
        margin-top: 10px;
        width: 100%;
        font-size: 18px;
        color: #606266;
        text-align: center;
    }
</style>
